<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       .box{
           width: 66px;
           height: 500px;
           margin: 30px auto;
       }
       .box p{
           text-align: center;
       }
       .msg{
           font-size: 20px;
       }
       
   </style>
</head>
<body>
    <div class="box">
        <p><span>用户名：</span><input type="text" name="username" placeholder="请输入用户名" id="username"><i class="msg"></i></p>
        <p><input type="submit" value="注册" id="btn"></p>
        <script>
            var dbUsers = ['李宝利','张端阳','范文卓']
            // 获取事件源对象
            var oInput = document.getElementById('username');
            //页面加载
            window.onload = function(){
                console.log('over...');
                // 失去焦点
                oInput.onblur = function(e){
                    alert(oInput,value);
                    // 如何查找一个元素在数组中呢
                    var isHas = dbUsers.some(function(val,index,arr){
                        return val == oInput,value;
                    });
                    /* 判断 */
                    if(isHas){
                        document.querySelector('.msg').innerHTML = '该用户已注册';
                        document.querySelector('.msg').style.color = 'red';
                    }else{
                        document.querySelector('.msg').innerHTML = '恭喜你可以注册';
                        document.querySelector('.msg').style.color = 'green';
                    }
                }
            }
        </script>
    </div>
</body>
</html>